<script lang="ts" setup>
	import { onMounted, ref, computed, onBeforeMount } from 'vue'
	const flag = ref(false)

	const emit = defineEmits(['toMoudle', 'handleEnd'])


	onMounted(() => {
		getTime();

	})

	const getTimeData = ref(new Date());
	const getTime = () => {

		getTimeData.value = new Date();
		setTimeout(() => {
			getTime()
		}, 1000)
	}

	const dayOfWeek = computed(() => {
		const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

		return days[getTimeData.value.getDay()];
	})


	const navigateTo = (e, flag = false) => {
		emit('toMoudle',e)
		let path = '';
		// switch (e) {
		// 	case 'appoint':
		// 		path = '/pages/appointment/index'
		// 		break;
		// 	case 'article':
		// 		path = '/pages/index/index'
		// 		break;
		// 	case 'consultCenter':
		// 		path = '/pages/consultationCenter/index'
		// 		break;
		// 	case 'homeAudio':
		// 		path = '/pages/musicRelax/index'
		// 		break;
		// 	case 'homeGame':
		// 		path = '/pages/game/gameList'
		// 		break;
		// 	case 'evaluation':
		// 		path = '/pages/evaluation/index/index'
		// }

		if (path != '') {
			if (flag) {
				uni.navigateTo({
					url: path,
					animationType: 'none'
				})

			} else {
				uni.navigateTo({
					url: path
				})
			}

		}
	}
	const handleEnd = () => {
			emit('handleEnd')
		}
</script>

<template>
	<view @touchend="handleEnd">
		<view class=" flex-around" style="margin-top: 10%;">
			<view class="big-item-box bg-49BEFF-91D6A9  relative dateBox"
				style="width: 28%;height: 250px;border-radius: 15px;" @click="flag = true">
				<view class="bgfffff calendar-outBox absolute mt14" :class=" flag? 'show':'hide'"
					style="width: 100%;height: 350px;backdrop-filter: blur(18px);background: rgba(0, 0, 0, 0.5);color: white;border-radius: 10px;padding: 10px;right:0%;z-index: 3;bottom: 0%;box-sizing: border-box;">
					<view class=" flex-column">
						<view class="w100p flex-end ">
							<view style="padding: 0 10px;" @click.stop="flag = false">
								<u-icon name="close" color="#2979ff" size="18"></u-icon>
							</view>
						</view>
						<view class="calendar-box pt12">
							<zzx-calendar style=""></zzx-calendar>
						</view>
					</view>
				</view>
				<view class="">
					<text
						class="time-text">{{`${getTimeData.getFullYear()} 年 ${getTimeData.getMonth()+1} 月 ${getTimeData.getDate()} 日  ${dayOfWeek}` }}</text>
					<view class="flex   mt30">
						<view class="time-box">{{getTimeData?.getHours()}}</view>
						<view class="time-colon">:</view>
						<view class="time-box">
							{{getTimeData.getMinutes()<10?'0':'' }}{{getTimeData.getMinutes()}}
						</view>
						<view class="time-colon">:</view>
						<view class="time-box">
							{{getTimeData.getSeconds()<10?'0':'' }}{{getTimeData.getSeconds()}}
						</view>
					</view>
				</view>
			</view>
			<view class="big-item-box bg-91D6A9-FAFAFA click-scale"
				style="width: 28%;height: 250px;border-radius: 15px;" @click="navigateTo('appoint')">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/homeAppoint.svg'" />
				</view>
				<view class="item-content mt20">
					咨询预约
				</view>
			</view>
			<view class="big-item-box bg-8798FF-468AED click-scale"
				style="width: 28%;height: 250px;border-radius: 15px;" @click="navigateTo('article')">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/article.svg'" />
				</view>
				<view class="item-content mt20">
					心理文章
				</view>
			</view>
		</view>
		<view class="mt20 flex-around">
			<view class="big-item-box bg-B8A1F7-B67BF4 click-scale"
				style="width: 20%;height: 250px;border-radius: 15px;" @click="navigateTo('consultCenter')">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/homeConsultCenter.svg'" />
				</view>
				<view class="item-content mt20">
					咨询中心
				</view>
			</view>
			<view class="big-item-box bg-EB9CA1-EB6F9B click-scale"
				style="width: 20%;height: 250px;border-radius: 15px;" @click="navigateTo('homeAudio')">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/homeMusic.svg'" />
				</view>
				<view class="item-content mt20">
					心理影音
				</view>
			</view>
			<view class="big-item-box bg-E3D694-E7AD68 click-scale"
				style="width: 20%;height: 250px;border-radius: 15px;" @click="navigateTo('evaluation')">
				<view class="flex-center icon-box">
					<img class="item-icon " :src="'@/../static/img/home/xlcp.svg'" />
				</view>
				<view class="item-content mt20">
					心理测评
				</view>
			</view>
			<view class="big-item-box bg-468AED-4767EB click-scale"
				style="width: 20%;height: 250px;border-radius: 15px;" @click="navigateTo('homeGame',true)">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/homeGame.svg'" />
				</view>
				<view class="item-content mt20">
					心理游戏
				</view>
			</view>
		</view>

	</view>
</template>

<style>
	.big-item-box {
		display: flex;
		/* width: 516.667px; */
		/* height: 350px; */
		padding: 0px 30px;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.time-box {
		display: flex;
		width: 25px;
		height: 30px;
		padding: 6px 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 5px;
		background: #006EE3;
		font-size: 28px;
		color: white;

	}

	.time-text {
		color: #FFF;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		color: #FFF;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.time-colon {
		color: #024FA0;
		text-align: center;
		font-family: PingFang HK;
		font-size: 28px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin: 0 10px;

	}

	.item-icon {
		width: 80%;
		height: 100%;
		flex-shrink: 0;

	}

	.item-content {
		color: #FFF;
		text-align: center;
		text-shadow: 0px 3.6px 3.6px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.calendar-outBox {
		transition: 0.5s;
		transition-timing-function: ease;

	}

	.show {
		opacity: 1;
	}

	.hide {
		opacity: 0;
		pointer-events: none;
		/* 使隐藏元素不响应点击事件 */
	}

	.bg-49BEFF-91D6A9 {

		background: linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;
	}

	.bg-91D6A9-FAFAFA {

		background: linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;
	}

	.bg-8798FF-468AED {
		background: linear-gradient(246deg, #8798FF -0.06%, #576BE2 101.72%), linear-gradient(239deg, #468AED 17.23%, #4767EB 99.93%), #FAFAFA;
	}

	.bg-B8A1F7-B67BF4 {
		background: linear-gradient(224deg, #B8A1F7 2.68%, #B67BF4 99.93%), #FAFAFA;
	}

	.bg-EB9CA1-EB6F9B {
		background: linear-gradient(223deg, #EB9CA1 3.08%, #EB6F9B 98.48%), linear-gradient(0deg, #638AFF 0%, #638AFF 100%), #FFF;
	}

	.bg-E3D694-E7AD68 {
		background: linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;
	}

	.bg-468AED-4767EB {
		background: linear-gradient(239deg, #468AED 17.23%, #4767EB 99.93%), linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;

	}

	.fontPage {
		visibility: visible;
		transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
		opacity: 1;
		z-index: 9999;
	}

	.opacity0 {
		/* animation: hidden 1s ease-in-out; */
		opacity: 0;
		visibility: hidden;
		z-index: 1;
	}
</style>